<template>
	<view>
		<view class="container">
			<form @submit="Login">
				<view class="avatorWrapper">
					<!-- <view class="avator">
						<image class="img" src="../../static/logo.png" mode="widthFix"></image>
					</view> -->
					<!-- <image class="img" src="../../static/logo.png" mode="widthFix"></image> -->
				</view>
				<view class="form">
					<view class="inputWrapper">
						<input class="input" v-model="userName" type="text" value="" placeholder="手机号/邮箱" />

					</view>
					<view class="inputWrapper">
						<input class="input" v-model="password" type="password" value="" placeholder="密码" />
						<!-- <input class="input" type="text" v-model="code" placeholder="" /> -->
						<!-- <view :class="[disabledCode==true?'code_text_tap':'code_text']" @tap="onSendCode" :disabled="disabledCode">{{codeText}}</view> -->
					</view>
				</view>
				<button form-type="submit" class="loginBtn">登录</button>
			</form>
			<view class="transfer">
				<view class="loginSms" @click="changeModel()">
					短信验证
				</view>
				<text>|</text>
				<view class="Registration" @click="toForgotPassword()">
					忘记密码？
				</view>

			</view>
			<view class="registrationBtn">

			</view>
			<button @click="toRegistration()" class="registration">注册</button>
			<!-- {{kind}} -->
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"

	export default {
		computed: {
			...mapState('user_List', ['userList', 'Token']),
		},
		// onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
		// 	console.log(option); //打印出上个页面传递的参数。
		// 	this.kind = option.kind
		// },
		props: {
			kind: String,
			required: true
		},
		data() {
			return {
				// kind: '',
				model: true,
				userName: '18575842937',
				password: '123456',
				phoneNum: "18575842937",
				phonePassword: "123456",
				eamil: "2418514837@qq.com",
				eamilPassword: "123456",
			}
		},
		methods: {
			...mapMutations('user_List', ['addToken']),

			//登录
			Login() {
				var regex = /^(13[0-9]{9})|(15[0-9]{9})|(17[0-9]{9})|(18[0-9]{9})|(19[0-9]{9})$/; //手机号码
				var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/; //邮箱
				//判断手机号码
				if (regex.test(this.userName)) {
					console.log('手机号码');
					// this.LoginByPhone();
					this.phoneText();
				} else if (reg.test(this.userName)) { //判断邮箱
					console.log("邮箱");
					this.LoginByEmail();
				} else if (this.password == null) { //密码是否为空
					console.log("密码为空");
					uni.$showMsg("密码为空");
				} else {
					console.log("格式错误");
					uni.$showMsg("格式错误")
				}
			},

			//手机登录

			LoginByPhone() {
				console.log("手机号码登录");
				uni.request({
					method: 'POST',
					url: "Login/Phone",
					data: {
						phone: "18575842937",
						password: "123456",
					},
					success: (data) => {
						console.log('data', data);
						if (data.data.code === "200") {
							this.addToken(data.data.data);
							console.log("Token缓存成功");
						}
						// uni.$showMsg(data.data.msg)
						if (this.kind === "older") {
							uni.navigateTo({
								url: '../individuation/individuation'
							})
						}
					}
				})
				//模拟
				if (this.kind == 'older') {
					uni.navigateTo({
						url: '../individuation/individuation'
					})
				} else {
					console.log("跳转失败")
				}


			},
			//邮箱登录
			LoginByEmail() {
				uni.request({
					method: 'POST',
					url: "http://10.100.80.51:10393/mock/62e3beea-1d1a-48ad-844d-1d70f80ec4e2/mock/62e3beea-1d1a-48ad-844d-1d70f80ec4e2",
					data: {
						eamil: "2418514837@qq.com",
						eamilPassword: "123456",
					},
					success: (data) => {
						console.log('data', data);
						if (data.data.code === "200") {
							this.addToken(data.data.data);
							console.log("Token缓存成功");
						}
						// uni.$showMsg(data.data.msg)
					}
				})
			},


			//测试
			phoneText() {
				this.$request.post('/Login/Phone', {
					phone: "18575842937",
					password: "123456",
				}).then(data => {
					console.log('data', data);
					if (data.data.code === "200") {
						uni.setStorageSync("Authorization", data.data.access_token);
						// uni.setStorageSync("expiresIn", new Date() + data.data.expires_in * 1000)
						console.log("Token缓存成功");
					}
				})
				if (this.kind == 'older') {
					uni.navigateTo({
						url: '../individuation/individuation'
					})
				} else {
					console.log("跳转失败")
				}

			},
			eamilText() {
				this.$request.post('/Login/Phone', {
					eamil: "2418514837@qq.com",
					eamilPassword: "123456",
				}).then(data => {
					console.log('data', data);
					if (data.data.code === "200") {
						uni.setStorageSync("Authorization", data.data.data);
						// uni.setStorageSync("expiresIn", new Date() + data.data.expires_in * 1000)
						console.log("Token缓存成功");
					}
					if (this.kind === "older") {
						uni.navigateTo({
							url: '../individuation/individuation'
						})
					}
				})
			},

			toLoginSms() {
				uni.navigateTo({
					url: '../loginSms/loginSms?kind=' + this.kind
				})
			},
			toRegistration() {
				uni.navigateTo({
					url: '../registration/registration?kind=' + this.kind
				})
			},
			toForgotPassword() {
				uni.navigateTo({
					url: '../../pages/forgotPassword/forgotPassword'
				})
			},
			//切换登录方式

			changeModel() {
				this.model = false;
				this.$emit('closeMain', this.model)
			},
			onSendCode: function() {
				this.disabledCode = true;
				let self = this
				self.show = true;
				var time = 60;
				var timer = setInterval(fun, 1000);

				function fun() {
					time--;
					if (time >= 0) {
						self.codeText = time + "秒重新发送";
					} else if (time < 0) {
						self.codeText = "获取验证码";
						self.disabledCode = false;
						clearInterval(timer);
						time = 60;
					}
				}
			}



		}
	}
</script>

<style>
	.container {
		/* background: #377EB4; */
		width: 100vw;
		height: 100vh;
	}

	.avatorWrapper {
		width: 100%;
		height: 30vh;
		position: relative;
		z-index: 1;
		text-align: center;
		line-height: 200px;
	}

	.avatorWrapper::after {
		position: absolute;
		content: "";
		width: 100%;
		height: 100%;
		left: 0;
		z-index: -1;
		border-radius: 0 0 35% 35%;
		background: url('../../static/oldster/login/headerIcon.png');
		background-size: cover;
	}


	/* 	.avator {
		width: 100%;
		height: 100%;
		overflow: hidden;
	} */

	.avator .img {
		/* height: 100%; */
		/* width: 100%; */
		max-width: 100%;
		max-height: 100%;
	}

	.form {
		padding: 0 75rpx;
		margin-top: 30px;
	}

	.inputWrapper {
		width: 100%;
		height: 120upx;
		background: white;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 0 20px;
		margin-top: 25px;
	}

	.inputWrapper .input {
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 50rpx;
		position: relative;
		border: 1px solid #bfbfbf;
		box-shadow: 0 0 10px 2px #bdcee0;
		border-radius: 2vh;
	}

	.loginBtn {
		width: 70%;
		height: 120upx;
		color: #FFFFFF;
		letter-spacing: 2vh;
		text-align: center;
		font-size: 50rpx;
		background: linear-gradient(#FEBC86, #F76D2E);
		border-radius: 2vh;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.registration {
		width: 70%;
		height: 120upx;
		color: #E4A959;
		letter-spacing: 2vh;
		text-align: center;
		font-size: 50rpx;
		font-weight: bold;
		/* background: linear-gradient(#FEBC86,#F76D2E); */
		border: 5rpx solid #F0CDB1;
		/* border-radius: 4vh; */
		border-radius: 2vh;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 50px;
	}

	.registrationBtn {
		display: flex;
		margin-top: -50px;
	}


	.loginBtn .btnValue {
		color: white;
	}

	.forgotBtn {
		text-align: center;
		color: #EAF6F9;
		font-size: 15px;
		margin-top: 20px;
	}

	.transfer {
		width: 100%;
		height: 10%;
		display: flex;
		margin-top: 10%;
		/* margin: 0 auto; */

		text-align: center;
	}

	.Registration {
		margin: 0 auto;

	}

	.loginSms {
		margin: 0 auto;
	}
</style>
